﻿@model WcfAndMvcSite.WCFServer.Person

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/JS/jquery-1.8.0.min.js"></script>
</head>
<body>
    <div>
        获取单个Person<span style="color: Red">(这里是model提供数据</span>):
        Name:@Html.TextBoxFor(m => m.name, new { @disabled = "disabled" })
        Age :@Html.TextBoxFor(m => m.age, new { @disabled = "disabled" })
        Sex :@Html.TextBoxFor(m => m.sex, new { @disabled = "disabled" })
    </div>

    <div>
        <input type="button" id="btn_getAll" value="获取所有Person" /><span style="color: Red">(这里是Ajax提供数据)</span>:
        <table id="tab"></table>
    </div>

    <div>
        <input type="button" id="btn_getAge" value="根据名称获取Age" /><span style="color: Red">(这里是Ajax提供数据)</span>:
        Name:<input type="text" id="txt_name" />
        Age :<input type="text" id="txt_age" disabled="disabled" />
    </div>

    <div>
        <form method="post" id="form1">
            <input type="submit" id="btn_addPerson" value="添加用户" /><span style="color: Red">(MVC方式提交表单--页面会刷新)</span>:
            Name:<input type="text" name="name" />
            Age :<input type="text" name="age" />
            Sex :<input type="text" name="sex" />
        </form>
    </div>

    <div>
        <input type="button" id="btn_ajaxAddPerson" value="添加用户" /><span style="color: Red">(Ajax方式提交表单--页面不会刷新)</span>:
            Name:<input type="text" id="name" />
            Age :<input type="text" id="age" />
            Sex :<input type="text" id="sex" />
    </div>
</body>
</html>
<script type="text/javascript">
    function SendAjax(reqtype, requrl, reqdata, datatype, callback) {
        $.ajax({
            type: reqtype,
            async: true,
            url: requrl,
            dataType: datatype == "" ? "text" : datatype,
            data: reqdata,
            cache: false,
            success: callback,
            error: function (jqXHR, textStatus, errorThrown) {
                alert("HTTP请求错误代码:" + jqXHR.status + ",描述:" + jqXHR.statusText);
            }
        });
    }

    $("#btn_getAll").click(function () {
        var url = '@Url.Action("GetAllPerson", "Home")';
        SendAjax("get", url, null, "json", function (data) {
            if (data.length == 0) {
                return;
            }
            var html = "";
            for (var i = 0; i < data.length; i++) {
                html += "<tr>";
                html += "<td>" + data[i].name + "</td>";
                html += "<td>" + data[i].age + "</td>";
                html += "<td>" + data[i].sex + "</td>";
                html += "</tr>";
            }
            $("#tab").append($(html));
        })
    })

        $("#btn_getAge").click(function () {
            var url = '@Url.Action("GetAgeByName", "Home")';
        var parm = {
            name: $("#txt_name").val()
        };
        if ($("#txt_name").val() == "") {
            alert("Please Enter Name!");
            return;
        }
        SendAjax("get", url, parm, "", function (data) {
            $("#txt_age").val(data);
        });
    })

    $("#btn_addPerson").click(function () {
        var url = '@Url.Action("Index", "Home")';
        $("#form1").attr("action", url);
    })

    $("#btn_ajaxAddPerson").click(function () {
        var url = '@Url.Action("AddPerson", "Home")';
        var parm = {
            name: $("#name").val(),
            age: $("#age").val(),
            sex: $("#sex").val()
        };

        SendAjax("post", url, parm, "", function (data) {
            alert(data);
        });
    })
</script>
